<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>ASP Cloud Storage</title>

<link rel="stylesheet" type="text/css" href="../css/mystyle.css"/>
<link rel="stylesheet" type="text/css" href="../js/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.css"/>
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js"></script>


<script type="text/javascript">
// page ctrls
function refreshPageCtrl(_totalPage ){
	var pageStr = '';
	for(var i=0;i<_totalPage;i++){
		pageStr += '<option value="'+String(i+1)+'" >'+String(i+1)+'/'+String(_totalPage)+'</option>';
	}
	$("#pagecontrol_sel").attr('rows',_totalPage);
	$("#pagecontrol_sel").html( pageStr ).selectmenu('refresh', true);
	
	turnToPage(1, $("#pagecontrol_sel").attr('rows'));
}
function turnToPage(_page, _totalPages){
	$.post("", {"curpage":_page, "totalpages":_totalPages}, function(feedback){
			$("#pagecontrol_sel").val( _page );
			$("#pagecontrol_sel").selectmenu('refresh', true);
			
			if(_page==1){
				$("#pagecontrol_first").addClass("ui-disabled");
				$("#pagecontrol_pre").addClass("ui-disabled");
			} else if(_page>1) {
				$("#pagecontrol_first").removeClass("ui-disabled");
				$("#pagecontrol_pre").removeClass("ui-disabled");
			}
			if(_page==_totalPages){
				$("#pagecontrol_last").addClass("ui-disabled");
				$("#pagecontrol_next").addClass("ui-disabled");
			} else if(_page<_totalPages) {
				$("#pagecontrol_last").removeClass("ui-disabled");
				$("#pagecontrol_next").removeClass("ui-disabled");
			}
	});
}
function pageCtrl( _mode ){
	switch(_mode){
		case 'first':
			turnToPage(1,$("#pagecontrol_sel").attr('rows'));
			break;
		case 'last':
			turnToPage($("#pagecontrol_sel").attr('rows'),$("#pagecontrol_sel").attr('rows'));
			break;
		case 'pre':
			turnToPage(parseInt($("#pagecontrol_sel").val())-1,$("#pagecontrol_sel").attr('rows'));
			break;
		case 'next':
			turnToPage(parseInt($("#pagecontrol_sel").val())+1,$("#pagecontrol_sel").attr('rows'));
			break;
		case 'page':
			turnToPage(parseInt($("#pagecontrol_sel").val()),$("#pagecontrol_sel").attr('rows'));
			break;
	}
}

// choose files to upload
function upload( obj ){
	for(var i=0;i<obj.files.length;i++){
		//alert( obj.files[i].name );
		var newFileItemStr = '<div id="ttt" style="width:200px;float:left;margin-left:10px;"><a href="javascript:" onclick="$(this).parent().remove();" data-role="button" data-icon="delete" data-iconpos="right" data-mini="true">'+obj.files[i].name+'</a><div style="width:75%;background-color:#069;height:2px;line-height:2px;"></div></div>';
		$("#fileuploader").append($(newFileItemStr)).trigger( "create" );;
	}
}
</script>

</head>

<body>

<div data-role="page" id="login" data-theme="a">
	
    <div class="txssession" style="background-color:#DDD;">
    	<div class="ui-grid-a">
        	<div class="ui-block-a">
                <div style="margin:10px;"><div id="txsheader">ASP CS</div></div>
            </div>
            <div class="ui-block-b">
            	<div style="overflow:hidden;margin:10px;">
                	<div style="margin-right:10px;float:right;"><a href="#" style="text-decoration:none;font-size:14px;font-weight:normal;text-shadow:none;">LOGOUT</a></div>
                	<div style="margin-right:10px;float:right;"><a href="#" style="text-decoration:none;font-size:14px;font-weight:normal;text-shadow:none;">SETTINGS</a></div>
                	<div style="margin-right:10px;float:right;"><a href="#" style="text-decoration:none;font-size:14px;font-weight:normal;text-shadow:none;">USERNAME</a></div>
                </div>
            </div>
        </div>
    </div>
    <div data-role="header" style="overflow:hidden;">
        <div style="float:left;">
        	<table border="0" cellspacing="0" cellpadding="0"><tr><td><input style="width:145px;height:10px;" type="search" name="prefix" id="prefix" value="" placeholder="Enter file prefix name" data-mini="true" ></td><td><a href="#" data-role="button" data-mini="true" data-icon="search" data-iconpos="notext">Search</a></td></tr></table>
        </div>
		<div style="float:right;">
        	<div data-role="controlgroup" data-type="horizontal" data-mini="true">
            	<!-- <div onclick="$('#files')[0].click();" data-role="button" data-icon="plus" data-iconpos="left" data-theme="b">Upload<div style="width:0px;height:0px;position:absolute;left:0px;top:0px;z-index:-100;overflow:hidden;"><input type="file" id="files" name="files" multiple="" onchange="upload(this);" data-role="none" style="width:100%;height:100%;" /></div></div> -->
                <a href="#uploadsettings" data-role="button" data-icon="plus" data-iconpos="left" data-theme="b">Upload</a>
            	<div data-role="button" data-icon="arrow-d" data-iconpos="left" data-theme="b" class="ui-disabled">Download</div>
        		<div data-role="button" data-icon="delete" data-iconpos="left" data-theme="b" class="ui-disabled">Delete</div>
            </div>
        </div>
    </div><!-- /header -->
    
    <div data-role="content" data-theme="c">
        <div data-role="controlgroup" data-type="horizontal" data-mini="true">
            <a href="#" data-role="button" data-icon="home">Home</a>
            <a href="#" data-role="button">Directory1</a>
            <a href="#" data-role="button">Directory2</a>
            <a href="#" data-role="button">Directory3</a>
        </div>
        
        <div data-role="content" style="border:1px solid #CCC;min-height:720px;">         
            <table data-role="table" id="files-table" data-mode="reflow" class="ui-responsive table-stroke">
                <thead>
                    <tr>
                    	<th data-priority="1"><div style="width:38px;height:40px;overflow:hidden;"><input type="checkbox" name="selectall" id="selectall" data-mini="true" onchange="$('input[name=&quot;filelist&quot;]').prop('checked', this.checked).checkboxradio('refresh');"/><label for="selectall" data-mini="true" style="width:34px;height:34px;">&nbsp;</label></div></th>
                        <th data-priority="2"><a href="#" data-role="button" data-mini="true">Name</a></th>
                        <th data-priority="3"><a href="#" data-role="button" data-mini="true">Type</a></th>
                        <th data-priority="4"><a href="#" data-role="button" data-mini="true">Modify Date</a></th>
                        <th data-priority="5"><a href="#" data-role="button" data-mini="true">Size</a></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    	<th><div style="width:38px;height:40px;overflow:hidden;"><input name="filelist" type="checkbox" id="file_1" data-mini="true" onchange="var flag=false;for(var c=0;c<$('input[name=&quot;filelist&quot;]').length;c++){if($('input[name=&quot;filelist&quot;]')[c].checked){flag=true;}else{flag=false;break;}}$('input[name=&quot;selectall&quot;]').prop('checked',flag).checkboxradio('refresh');" /><label for="file_1" data-mini="true" style="width:34px;height:34px;">&nbsp;</label></div></th>
                        <td><a href="#" style="color:#AAA;font-size:14px;">1234567890abcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnopqrstuvwxyz.txt</a></td>
                        <td style="color:#BBB;font-size:14px;">text/plain</td>
                        <td style="color:#BBB;font-size:14px;">2013-11-15 10:49:53</td>
                        <td style="color:#BBB;font-size:14px;">331B</td>
                    </tr>
                    <tr>
                    	<th><div style="width:38px;height:40px;overflow:hidden;"><input name="filelist" type="checkbox" id="file_2" data-mini="true" onchange="var flag=false;for(var c=0;c<$('input[name=&quot;filelist&quot;]').length;c++){if($('input[name=&quot;filelist&quot;]')[c].checked){flag=true;}else{flag=false;break;}}$('input[name=&quot;selectall&quot;]').prop('checked',flag).checkboxradio('refresh');" /><label for="file_2" data-mini="true" style="width:34px;height:34px;">&nbsp;</label></div></th>
                        <td><a href="#" style="color:#AAA;font-size:14px;">bbb.txt</a></td>
                        <td style="color:#BBB;font-size:14px;">text/plain</td>
                        <td style="color:#BBB;font-size:14px;">2013-11-15 10:49:53</td>
                        <td style="color:#BBB;font-size:14px;">331B</td>
                    </tr>
                    <tr>
                    	<th><div style="width:38px;height:40px;overflow:hidden;"><input name="filelist" type="checkbox"  id="file_3" data-mini="true" onchange="var flag=false;for(var c=0;c<$('input[name=&quot;filelist&quot;]').length;c++){if($('input[name=&quot;filelist&quot;]')[c].checked){flag=true;}else{flag=false;break;}}$('input[name=&quot;selectall&quot;]').prop('checked',flag).checkboxradio('refresh');" /><label for="file_3" data-mini="true" style="width:34px;height:34px;">&nbsp;</label></div></th>
                        <td><a href="#" style="color:#AAA;font-size:14px;">sss.txt</a></td>
                        <td style="color:#BBB;font-size:14px;">text/plain</td>
                        <td style="color:#BBB;font-size:14px;">2013-11-15 10:49:53</td>
                        <td style="color:#BBB;font-size:14px;">331B</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div data-role="footer">
        <div id="pagescontrolgroup" data-role="controlgroup" data-type="horizontal" data-mini="true" style="text-align:center">
            <a id="pagecontrol_first" href="javascript:pageCtrl('first')" data-role="button" class="ui-disabled">First</a>
            <a id="pagecontrol_pre" href="javascript:pageCtrl('pre')" data-role="button" class="ui-disabled">PRE</a>
            <select data-role="text" name="pagecontrol_sel" id="pagecontrol_sel" onchange="pageCtrl('page')" rows="0">
        	</select>
            <a id="pagecontrol_next" href="javascript:pageCtrl('next')" data-role="button" class="ui-disabled">Next</a>
            <a id="pagecontrol_last" href="javascript:pageCtrl('last')" data-role="button" class="ui-disabled">Last</a>
        </div>
        </div>
        
    	<div data-role="content" style="border:1px solid #CCC;">
        	<div id="fileuploader">
            	
            </div>
        </div>

    </div>



    <div data-role="footer">
        <div>ASP CLOUD STORAGE</div>
    </div>
</div>

<div data-role="page" data-theme="b" id="uploadsettings">
    <div class="txssession" style="background-color:#DDD;">
    	<div class="ui-grid-a">
        	<div class="ui-block-a">
                <div style="margin:10px;"><div id="txsheader">ASP CS</div></div>
            </div>
            <div class="ui-block-b">
            	<div style="overflow:hidden;margin:10px;">
                	<div style="margin-right:10px;float:right;"><a href="#" style="text-decoration:none;font-size:14px;font-weight:normal;text-shadow:none;">LOGOUT</a></div>
                	<div style="margin-right:10px;float:right;"><a href="#" style="text-decoration:none;font-size:14px;font-weight:normal;text-shadow:none;">SETTINGS</a></div>
                	<div style="margin-right:10px;float:right;"><a href="#" style="text-decoration:none;font-size:14px;font-weight:normal;text-shadow:none;">USERNAME</a></div>
                </div>
            </div>
        </div>
    </div>
    
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#EEE;margin:0px;min-height:720px;"><tr><td align="center" valign="top" ><table border="0" cellpadding="0" cellspacing="0" class="txssession"><tr><td align="center" valign="top">
        <h2 style="color:#999;max-width:300px;">File Upload Setting</h2>
        <div style="max-width:400px;width:100%;">
        		<div class="ui-grid-solo">
                	<input id="inputname" name="inputname" type="text" value="" placeholder="File Name" />
                    <div style="font-size:12px;color:#F63;text-align:left;">Require a unique File Name.</div>
                	<input type="file" value="" onchange="$(this).parent().children('input[" />
                </div>
                <div class="ui-grid-a">
                	<div class="ui-block-a"><button type="button" data-theme="b">Upload</button></div>
                    <div class="ui-block-b"><a href="javascript:void(0)" data-role="button" data-rel="back" data-theme="a">Back</a></div>
                </div>
		</div>
    </td></tr></table></td></tr></table>
    
    <div data-role="footer" data-position="fixed">
        <div>ASP CLOUD STORAGE</div>
    </div>
</div>

</body>
</html>
